<template>
  <div class="order-panel-wrapper">
    <div
      :class="['item', 'item-index-' + (index + 1)]"
      v-for="(item, index) of datas"
      :key="index"
    >
      <div class="item-icon">
        <span v-if="index >= 3">{{ index + 1 }}</span>
      </div>
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="item.name"
        placement="top"
      >
        <div class="item-name">{{ item.name }}</div>
      </el-tooltip>
      <div class="item-line" :class="{ 'icon-line': hasIcon }">
        <div
          class="item-line-inner"
          :style="{ width: `${getWidth(item.num)}%`, backgroundColor: color }"
        ></div>
      </div>
      <div class="item-num" :class="{ 'large-num': hasIcon }">
        {{ isPercent ? item.num + '%' : item.num }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { PropType } from 'vue'

export interface OrderData {
  name: any
  num: any
}

const props = defineProps({
  datas: {
    type: Array as PropType<OrderData[]>,
    default: () => [],
  },
  color: {
    type: String,
    defalut: '#05D195',
  },
  hasIcon: {
    type: Boolean,
    default: false,
  },
  isPercent: {
    type: Boolean,
    default: false,
  },
})

const max = ref(0)

watch(
  () => props.datas,
  () => {
    if (props.datas.length > 0) {
      max.value = Math.max(...props.datas.map((i) => i.num))
    } else {
      max.value = 0
    }
  },
  {
    deep: true,
    immediate: true,
  }
)
const getWidth = (val: any) => {
  if (val === 0) {
    return 0
  } else {
    return ((val / max.value) * 100).toFixed(2)
  }
}
</script>
<style lang="scss" scoped>
.order-panel-wrapper {
  width: 100%;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    &:last-child {
      margin-bottom: 0;
    }
    &.item-index-1 {
      .item-icon {
        background: url('~@/assets/images/order1.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    &.item-index-2 {
      .item-icon {
        background: url('~@/assets/images/order2.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    &.item-index-3 {
      .item-icon {
        background: url('~@/assets/images/order3.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
    &-icon {
      width: 18px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: DIN;
      font-weight: 500;
      font-size: 16px;
      color: #717689;
      margin-right: 10px;
    }
    &-name {
      width: 60px;
      margin-right: 8px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #717689;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &-line {
      flex: 1;
      height: 5px;
      background: #f1f5f6;
      box-sizing: border-box;
      padding-right: 10px;
      &-inner {
        height: 100%;
        background: #05d195;
      }
    }
    .icon-line {
      height: 7px;
      .item-line-inner {
        position: relative;
        &::before {
          content: ' ';
          position: absolute;
          right: -2px;
          top: -4px;
          width: 5px;
          height: 15px;
          transform: rotate(9deg);
          background: linear-gradient(0deg, #05d195, #86ffff);
          border-radius: 2px;
        }
      }
    }
    &-num {
      width: 45px;
      margin-left: 8px;
      font-family: DIN;
      font-weight: 500;
      font-size: 14px;
      color: #27475f;
    }
    .large-num {
      width: 80px;
    }
  }
}
</style>
